<html>

<head>
  <meta charset="UTF-8" />
  <title>{ms:global.name/}</title>
  <script src="/static/mdiy/index.js"></script>

  <#include "head-file.htm" />

  <style>
    body {
      background-color: #F2F2F2;
    }

    .header {
      border-width: 0px;
      width: 100%;
      height: 2rem;
      background: inherit;
      background-color: rgba(2, 167, 240, 1);
      border: none;
      border-radius: 0px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    .header p {
      color: white;
      /* margin-top: 0.3rem; */
      line-height: 2rem;
      margin-left: 7rem;
      font-size: 1rem;
    }

    .banner {
      display: flex;
      justify-content: space-between;
      background-color: white;
      padding-top: 0.5rem;
    }

    .banner-left {
      display: flex;
      justify-content: space-around;
      margin-left: 7rem;
    }

    .u88_img {
      border-width: 0px;
      width: 3.25rem;
      height: 3.25rem;
      margin-right: 0.5rem;
    }

    .banner-text {
      font-weight: 500;
      font-style: normal;
      color: #02A7F0;
    }

    .banner-right {
      margin-right: 3rem;
      line-height: 4rem;
    }

    .banner-right ul {
      display: flex;
      flex: 1;
      font-weight: 400;
      font-style: normal;
      font-size: 1.3rem;
      color: #606266
    }

    .banner-right ul>li {
      margin-right: 3rem;
      cursor: pointer;
    }

    .main {
      padding: 1.5rem 7rem 5rem 7rem;
    }

    .text {
      position: relative;
      margin-top: 1rem;
      width: 100%;
      height: 10rem;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(226, 233, 249, 1);
      border-radius: 5px;
      padding: 0.5rem;
      font-weight: 300;
      font-style: normal;
      font-size: 16px;
      color: #606266;
    }

    .text ul {
      margin-top: 1rem;
    }

    .text ul li {
      text-decoration: underline;
      line-height: 2rem;
    }

    .text ul li::before {
      content: "";
      display: inline-block;
      width: 0.7rem;
      height: 0.7rem;
      background-color: black;
      border-radius: 50%;
      margin-right: 0.5rem;
    }

    .more {
      position: absolute;
      top: 1rem;
      right: 3.5rem;
      font-weight: 300;
      font-style: normal;
      font-size: 1rem;
      color: #606266;
      cursor: pointer;
    }

    .application {
      position: relative;
      margin-top: 1rem;
      width: 100%;
      height: 20rem;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(226, 233, 249, 1);
      border-radius: 5px;
      font-weight: 300;
      font-style: normal;
      font-size: 16px;
      color: #606266;
      padding: 0.5rem 2rem;
    }

    .application>p:first-child {
      text-align: center;
      font-weight: 500;
      font-style: normal;
      font-size: 24px;
      color: #303133;
      margin-bottom: 1rem;
    }

    .application>p:last-child {
      position: absolute;
      right: 4rem;
      top: 2rem;
      cursor: pointer;
    }

    .application-content {
      display: flex;
      justify-content: space-between;
    }

    .application-content>div {
      font-weight: 400;
      font-style: normal;
      font-size: 1rem;
      color: #606266
    }

    .statistics-content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      text-align: center;

    }

    .statistics-list {
      width: 30%;
    }

    .statistics-list p:first-child {
      font-weight: 600;
      font-style: normal;
      font-size: 1.7rem;
    }

    .statistics-list p:last-child {
      font-weight: 400;
      font-style: normal;
      font-size: 1rem;
      color: #606266;
    }

    .statistics-list:nth-child(2) {

      margin-right: 4rem;

    }

    .research {
      position: relative;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(235, 238, 245, 1);
      border-radius: 5px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      margin-top: 1rem;
    }

    .research>p:first-child {
      font-weight: 500;
      font-style: normal;
      font-size: 24px;
      color: #303133;
      text-align: center;
      border-bottom: 1px solid rgba(235, 238, 245, 1);
    ;
    }

    .research-list {
      display: flex;
      justify-content: space-between;
      padding: 2rem 0;
      border-bottom: 1px solid rgba(235, 238, 245, 1);
    ;
    }

    .list-text {
      margin-left: -23rem;
    }

    .list-text>p:first-child {
      font-weight: 400;
      font-style: normal;
      font-size: 1.2rem;
      margin: 0.5rem 0 1rem 0;
    }

    .list-text>p:nth-child(2),
    .list-text>p:nth-child(3) {
      color: #909399;
      margin: 0.5rem 0;
    }

    .list-button .el-button {
      height: 3.5rem;
      width: 6rem;
      font-size: 1.2rem;
    }
    .el-footer{
      background-color: #02A7F0;
      color: white;
      text-align: center;
      font-size: 1rem;
      line-height: 2.5rem;
      height: 5rem;
    }
  </style>
</head>

<body>
<div id="app">

  <#include "header.htm" />

  <div class="main">

    <div class="swiper">
      <div class="swiper-wrapper">
        <!--动态图片-->
        {ms:arclist typeid=1329357285870346241 size=3 }
        <div class="swiper-slide">
          <img src='{ms:global.host/}/{@ms:file field.litpic/}'>
        </div>
        {/ms:arclist}

      </div>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>

    <div class="text">
      <ul>
        <li>2022-03-08 广东省中小学教师校本研修示范学校/流溪中学教育集团“施强乐课杯”同课接力比赛活动方案</li>
        <li>2022-03-05 示范联动共发展，帮扶合作铸辉煌</li>
        <li>2022-03-02 结对帮扶促成长 两心相连结友谊——广东省校本研修示范学校广州九十七中学结对研修暨送课进校园活动</li>
        <li>2022-03-01 中小学名校长工作室授牌仪式暨研讨交流活动顺利召开</li>
      </ul>
      <span class="more">更多></span>
    </div>
    <div class="application">
      <p>应用数据</p>
      <div class="application-content">
        <div class="statistics" style="width: 15rem">
          <p>数据统计</p>
          <div class="statistics-content">
            <div class="statistics-list">
              <p>84</p>
              <p>微课</p>
            </div>
            <div class="statistics-list">
              <p>273</p>
              <p>学历案</p>
            </div>
            <div class="statistics-list">
              <p>846</p>
              <p>习题</p>
            </div>
            <div class="statistics-list">
              <p>133</p>
              <p>课件</p>
            </div>
            <div class="statistics-list">
              <p>572</p>
              <p>试卷</p>
            </div>
            <div class="statistics-list">
              <p>1060</p>
              <p>素材</p>
            </div>
            <div class="statistics-list">
              <p>65</p>
              <p>课堂实录</p>
            </div>
            <div class="statistics-list">
              <p>273</p>
              <p>教学设计</p>
            </div>
          </div>
        </div>
        <div class="exhibition">
          <p>数据展示</p>
          <div>
            <div><img src="./images/u35.svg" alt=""></div>
            <span style="margin-right: 2rem">《DNA的结构(第2课时)》</span><i class="el-icon-video-play"></i><span>1150</span>
          </div>
        </div>
        <div style="margin-top:1.5rem;">
          <div>
            <div><img src="./images/u42.svg" alt=""></div>
            <span style="margin-right: 1rem;">(回放)三江小学小学三年级语文...</span><i
                  class="el-icon-video-play"></i><span>5763</span>
          </div>
        </div>
      </div>
      <p>更多></p>
    </div>
    <div class="research">
      <p>研修活动</p>
      <div class="research-content">
        <div class="research-list">
          <div style="margin-left: 2rem"><img src="./images/u97.png" alt=""></div>
          <div class="list-text">
            <p>2018十大年度报道评选</p>
            <p><span style="margin-right: 2rem">开展时间:2022-02-26 10:49:39</span><span>结束时间:2022-03-26 10:49:39</span>
            </p>
            <p>活动主办方：《广东教育》杂志</p>
          </div>
          <div class="list-button" style="margin-right: 2rem;margin-top: 2rem;">
            <el-button type="primary" plain>进入</el-button>
            <el-button type="success" plain>分享</el-button>
          </div>
        </div>
        <div class="research-list">
          <div style="margin-left: 2rem"><img src="./images/u97.png" alt=""></div>
          <div class="list-text">
            <p>2018十大年度报道评选</p>
            <p><span style="margin-right: 2rem">开展时间:2022-02-26 10:49:39</span><span>结束时间:2022-03-26 10:49:39</span>
            </p>
            <p>活动主办方：《广东教育》杂志</p>
          </div>
          <div class="list-button" style="margin-right: 2rem;margin-top: 2rem;">
            <el-button type="primary" plain>进入</el-button>
            <el-button type="success" plain>分享</el-button>
          </div>
        </div>
      </div>
      <p class="more">更多></p>
    </div>
  </div>

  <#include "footer.htm" />
</div>

<script>

const App = {
  data() {
    return {
      message: "Hello Element Plus",
      img: [
        "./images/u48.jpg", "./images/u49.jpg", "./images/u50.jpg", "./images/u51.jpg"
      ]
    };
  },
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
var mySwiper = new Swiper('.swiper', {
  autoplay: true,//可选选项，自动滑动
  loop: true,
  // 如果需要分页器
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },//这样写小圆点就有了
  // 如果需要前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})
</script>

</body>

</html>